<div class="main-container">

  <div class="search-wrap">
    <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
      <nz-form-item>
        <nz-form-label>日期</nz-form-label>
        <nz-form-control>
          <nz-range-picker formControlName="rangePickerTime" [nzAllowClear]="false" (ngModelChange)="getDayList()"></nz-range-picker>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>关键词</nz-form-label>
        <nz-form-control>
          <input formControlName="keyword" nz-input placeholder="关键词"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <button nz-button nzType="primary" (click)="queryInfo()"><i nz-icon nzType="search"></i>搜索</button>
          <button nz-button nzType="default" class="btn-ora" (click)="onAdd()"><i nz-icon nzType="plus"></i>新增</button>
          <button nz-button nzType="default" (click)="exportDocx()"><i nz-icon nzType="download" nzTheme="outline"></i>导出</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>

  <div class="main-wrap">
    <div class="left-panel">
      <div class="day-list">
        <div *ngFor="let day of dayList"
             [ngClass]="{'active': day.value === selectedDay}"
             (click)="selectDay(day)">{{day.text}}</div>
      </div>
    </div>

    <div class="right-panel">
      <div class="form" *ngFor="let form of tableData; let idx = index" [ngClass]="{'even':idx % 2 === 0, 'odd': idx % 2 === 1}">
        <div class="title">
          {{ canalMap[form.objId] }} 计划流量：{{ form.planUse }}m³/s 限定流量：{{ form.limitFlow }}m³/s 当前流量：{{ form.actualUse }}m³/s
        </div>
        <div class="status">
          {{statusMap[form.step]}}
        </div>
        <div class="sheet">
          <div class="bar">
            <div>加减水申请</div>
            <div>申请单位：{{form.creatorUnit}}</div>
            <div>申请人：{{form.creatorName}}</div>
            <div>申请时间：{{form.ctTime}}</div>
          </div>
          <div class="textarea">
            <div>申请事宜：</div>
            <textarea nz-input [disabled]="!(1 == form.step)">{{form.applyContent}}</textarea>
            <div class="btn-wrap">
              <button class="btn-1" nzSize="small" nz-button nzType="primary" [disabled]="!(1 == form.step)">确认申请</button>
            </div>
          </div>

        </div>
        <div class="sheet">
          <div class="bar">
            <div>加减水审批</div>
            <div>审批单位：{{form.aproverUnit}}</div>
            <div>审批人：{{form.aproversName}}</div>
            <div>审批时间：{{form.aproverTime}}</div>
          </div>
          <div class="textarea">
            <div>处理情况：</div>
            <textarea nz-input [(ngModel)]="form.approveContent" [disabled]="!(2 == form.step)"></textarea>
            <div class="btn-wrap">
              <button class="btn-1" nzSize="small" nz-button nzType="primary" [disabled]="!(2 == form.step)" (click)="onAudit('approveContent', form)">确认审核</button>
            </div>
          </div>

        </div>
        <div class="sheet">
          <div class="bar">
            <div>加减水执行</div>
            <div>执行单位：{{form.executeUnit}}</div>
            <div>执行人：{{form.executorName}}</div>
            <div>执行时间：{{form.executeTime}}</div>
          </div>
          <div class="textarea">
            <div>执行情况：</div>
            <textarea nz-input [(ngModel)]="form.executeContent"  [disabled]="!(2 == form.step)"></textarea>
            <div class="btn-wrap">
              <button class="btn-1" nzSize="small" nz-button nzType="primary" [disabled]="!(3 == form.step)" (click)="onAudit('executeContent', form)">确认执行</button>
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>

  <nz-modal nzClassName="custom-modal dispatch-record-modal" nzWidth="1000" [(nzVisible)]="modalShow" [nzTitle]="'加减水申请'" [nzFooter]="null"
            (nzOnCancel)="onCancel()">
    <div class="form even">
      <div class="title">
        <ng-container *ngIf="canalInfo">
          {{ canalInfo.name }} 计划流量：{{ canalInfo.planUse }}m³/s 限定流量：{{ canalInfo.limitFlow }}m³/s 当前流量：{{ canalInfo.actualUse }}m³/s
        </ng-container>
      </div>
      <div class="sheet">
        <div class="bar">
          <div>加减水申请</div>
          <div>申请单位：</div>
          <div>申请人：</div>
          <div>申请时间：</div>
        </div>
        <div style="margin: 15px 20px 10px 20px;">
          <span style="width: 87px;display: inline-block">渠道选择：</span>
          <nz-select [(ngModel)]="selectedValue" (ngModelChange)="channelSelectChange()">
            <nz-option *ngFor="let item of channelOptions" [nzValue]="item.value" [nzLabel]="item.name"></nz-option>
          </nz-select>
        </div>
        <div class="textarea">
          <div>申请事宜：</div>
          <textarea nz-input [(ngModel)]="submitContent.applyContent"></textarea>
          <div class="btn-wrap">
            <button class="btn-1" nzSize="small" nz-button nzType="primary" (click)="onApply()">确认申请</button>
          </div>
        </div>
      </div>
      <div class="sheet">
        <div class="bar">
          <div>加减水审批</div>
          <div>审批单位：</div>
          <div>审批人：</div>
          <div>审批时间：</div>
        </div>
        <div class="textarea">
          <div>处理情况：</div>
          <textarea nz-input [(ngModel)]="submitContent.approveContent"></textarea>
        </div>
      </div>
      <div class="sheet">
        <div class="bar">
          <div>加减水执行</div>
          <div>执行单位：</div>
          <div>执行人：</div>
          <div>执行时间：</div>
        </div>
        <div class="textarea">
          <div>执行情况：</div>
          <textarea nz-input [(ngModel)]="submitContent.executeContent"></textarea>
        </div>
      </div>
    </div>
  </nz-modal>
</div>
